<template>
    <div id="app">
        <div class="aside">
            <h3>导航</h3>
            <ul>
                <li v-for="item in links" :key="item.to">
                    <router-link active-class="active" :to="item.to">{{item.text}}</router-link>
                </li>
            </ul>
        </div>
        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            links:[
                {text:"班级管理",to:'myclass'},
                {text:"学员管理",to:'student'},
                {text:"分数管理",to:'score'}
            ]
        }
    },
}
</script>
<style lang="less" scoped>

    #app{
        display: flex;
        .aside{
            width: 250px;
            background: #ced8e2;
        }
        .main{
            width: 100%;
        }
        .active{
            display: inline-block;
            text-decoration: none;
            color: #333;
            padding: 10px 20px;
        }

    }

</style>